<template>
	<view class="field" >
		<image class="f_bg" :src="parkidInfo.info.thumb" mode="widthFix"></image>
		<view class="body" id="body" v-if="parkidInfo.list.length>0">
			<scroll-view class="menu" :class="{'menu_a':setTop}" scroll-y="true" v-if="parkidInfo.list.length>1">
				<view class="m_item" :class="{'active':setId(item.id)===mIdx}" v-for="item in parkidInfo.list"
					@click="menuTap(setId(item.id))">{{item.title}}</view>
			</scroll-view>
			<view class="list" :style="{marginLeft: mleft}">
				<view class="l_li" v-for="item in parkidInfo.list" :id="setId(item.id)">
					<view class="title">{{item.title}}</view>
					<view class="shop" v-for="ci in item.childen" @click="$navTo('../product/product?id='+ci.id)">
						<view class="image_w">
							<image :src="ci.thumb" ></image>
						</view>
						<view class="t clamp2">{{ci.title}}</view>
						<view class="money">
							<text class="c">{{ci.saleprice}}</text>
							<text class="o">{{ci.productprice}}</text>
						</view>
						<view class="button">立即购买</view>
					</view>
				</view>

			</view>
		</view>
	</view>

</template>

<script>
	export default {
		data() {
			return {
				mleft: '130upx',
				setTop: false,
				bodytop: '',

				mIdx: '',

				parkid: '',
				parkidInfo: {
					info: {
						thumb: '',
						title: '',
						color:''
					},
					list: []
				},
			}
		},
		onPageScroll() {
			const windowHeight = uni.getSystemInfoSync().windowHeight;
			let query = uni.createSelectorQuery().in(this);
			query.select('#body').boundingClientRect(data => {
				this.setTop = data.top <= 0;
			}).exec();
			query.selectAll('.l_li').boundingClientRect(data => {
				let ndata = [...data];
				ndata.reverse();
				for (let i in ndata) {
					if (ndata[i].top < 70) {
						this.mIdx = ndata[i].id;
						return;
					}
				}
			}).exec();
		},
		onLoad(options) {
			this.parkid = options.parkid;
			this.getInfo();
		},
		methods: {
			getInfo() {
				this.$axios('park/parkinfo', 'POST', 'shop', {
					parkid: this.parkid
				}).then((res) => {
					if (res.data.code == 200) {
						this.parkidInfo = res.data.data;
						uni.setNavigationBarTitle({
							title: this.parkidInfo.info.title
						})
						// uni.setNavigationBarColor({
						// 	frontColor:"#ffffff",
						// 	backgroundColor:this.parkidInfo.info.color
						// })
						this.mleft = this.parkidInfo.list.length > 1 ? '130upx' : '0';
						this.mIdx = this.parkidInfo.list.length > 0 ? this.setId(this.parkidInfo.list[0].id) : '';
						this.$nextTick(() => {
							this.getBodyTop();
						})
					}
				})
			},
			getBodyTop() {
				const windowHeight = uni.getSystemInfoSync().windowHeight;
				let query = uni.createSelectorQuery().in(this);
				setTimeout(() => {
					query.select('#body').boundingClientRect(data => {
						this.bodytop = data.top;
					}).exec();
				}, 300)
			},
			menuTap(v) {
				if (this.mIdx === v) return;
				this.mIdx = v;
				this.setScroll('#' + v);
			},
			setScroll(id) {
				const windowHeight = uni.getSystemInfoSync().windowHeight;
				let query = uni.createSelectorQuery().in(this);
				const bodyTop = new Promise((res, rej) => {
					query.select('#body').boundingClientRect(data => {
						res(data.top);
					}).exec();
				})
				bodyTop.then(btop => {
					query.select(id).boundingClientRect(data => {
						uni.pageScrollTo({
							scrollTop: data.top - btop + this.bodytop - 20,
							duration: 0
						})
					}).exec();
				})

			},
			setId(v) {
				return 'id' + v;
			}
		}
	}
</script>

<style lang="scss">
	.field {
		background-color: #fff;
	}

	.f_bg {
		width: 100%;
		height: 300upx;
		// border-radius: 10upx;
		display: block;
	}

	.body {
		background: $bg-color;
		position: relative;
	}

	.menu {
		position: absolute;
		top: 0;
		left: 0;
		background: #fff;
		color: #666;
		font-size: 26upx;
		width: 130upx;
		height: calc(100vh - var(--window-top));
		z-index: 100;

		.m_item {
			display: flex;
			align-items: center;
			justify-content: center;
			padding: 20upx;
			height: 160upx;
		}

		.active {
			background: #dadee6;
			border-radius: 0 15upx 15upx 0;
		}
	}

	.menu_a {
		position: fixed;
		top: calc(var(--window-top) + var(--status-bar-height));

	}

	.list {
		padding: 0 14upx 70upx;
		font-size: 0;
		margin-left: 130upx;

		.l_li {
			.title {
				color: #fff;
				font-size: 36upx;
				font-weight: bold;
				text-align: center;
				padding-top: 20upx;
			}

			.shop {
				background-color: #fff;
				// box-shadow: 0 0 3px 3px #f5f5f5;
				border-radius: 20upx;
				display: inline-block;
				margin-top: 20upx;
				overflow: hidden;
				margin: 20upx 6upx 0;
				padding-bottom: 20upx;
				width: calc(50% - 12upx);

				.image_w {
					width: 100%;
					padding-bottom: 100%;
					position: relative;

					image {
						position: absolute;
						width: 100%;
						height: 100%;
					}
				}

				.t {
					font-size: 30upx;
					line-height: 40upx;
					height: 80upx;
					padding: 4upx 10upx 0;
				}

				.money {
					padding: 10upx;

					.c {
						font-size: 40upx;
						margin-right: 10upx;
					}

					.c::before {
						content: '￥';
						font-size: 28upx;
					}

					.o {
						color: #999;
						font-size: 26upx; 
						margin-right: 10upx;
						text-decoration: line-through;
					}
				}

				.button {
					border-radius: 14rpx;
					color: #fff;
					font-size: 28rpx;
					margin: 0 10upx;
					text-align: center;
					line-height: 68upx;
					background: #937eff;
					letter-spacing: 8rpx;
					box-shadow: 1rpx 0rpx 11rpx 0rpx #999;
				}
			}
		}
	}
</style>